<template lang='pug'>
.picker
    .pick_left
        .pick_tree
            //- slot(name='tree')
            el-tree(:data="data" show-checkbox node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]")
    .pick_right
        .pick_header
            //- slot(name='header')
            .pick_states
                .pick_btn(v-for='itm,idx in [1,2,3]' @click='rowcount(itm)') {{itm}}屏 
        .pick_content()
            //- slot(name="main")
            .pick_cell(v-for="itm,idx in cells" :style="styleCell")
                .videoNam {{itm}}
                video(src="movie.ogg" controls="controls" style="width:100%")
</template>
<script>
import svgCircle3 from '../svgShape/svgCircle3.vue'
export default {
    components:{svgCircle3},
    props:{
        bkColor:{default:'rgba(125,125,125,0.5)'},
        color:{default:'rgb(255, 234, 152)'},
        w:{default:120},
        h:{default:120},
        list:{
            type:Array,
            default:[{}]
        },
        tree:{
            type:Array,
            default:[{},{}]
        }
    },
    data(){
        return {
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    },{
                    id: 9,
                    label: '三级 1-1-1'
                    }, {
                    id: 10,
                    label: '三级 1-1-2'
             
                }]
            }],
            rowItemCount:1,
            cells:[1,23,4,5,6,7,8,9,3]
        }
    },
    mounted(){
       
    },
    computed:{
        stylesvg(){
            return {
                width:this.w+'px',
                height:this.h+'px',
                background:this.bkColor
            }
        },
        styleCell(){
            let pellete=['95%','46%','32%']
            return {
                width:pellete[this.rowItemCount-1],
            }
        },
    },
    methods:{
        rowcount(count){
            this.rowItemCount=count
        },
        styItmDist(idx){
            return {
                background:this.colors[idx]
            }
        },
        styItmNam(idx){
            return {}
        }
    }
}
</script>
<style lang="scss" scoped>
.picker{
    position:absolute;
    font-size: 20px;
    height: 100%;
    width: 100%;
    line-height: 28px;
    text-align: left;
    display: flex;
    // color: transparent;
    background: rgba( 0, 36, 78, $alpha: 0.5);
    border-radius: 10px;
    .pick_left{
        width: 160px;
        margin-right: 5px;
        border-right: 1px  solid gray;
        .pick_tree{
            margin-top: 10px;
        }
    }
    .pick_right{
        display: flex;
        flex-direction: column;
        flex: 1;
        .pick_header{
            height: 80px;
            display: flex;
            .pick_states{
                width: 300px;
                margin: auto;
                display: flex;
                justify-content: space-between;
                .pick_btn{
                    width: 50px;
                    height: 26px;
                    line-height: 26px;
                    border: 1px solid rgba(0, 177, 255, $alpha:0.9);
                    border-radius: 15px;
                    text-align: center;
                    font-size: 16px;
                }
            }
        }
        .pick_content{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            overflow: hidden;
            overflow-y: auto;
            .pick_cell{
                .videoNam{
                    font-size: 12px;
                    height: 16px;
                    line-height: 16px;
                    background: rgba(51,51,51,1);
                }
                margin-bottom: 3px; ;
            }
        }
    }
}
.el-tree{
    color: white;
    background: transparent;
}
</style>